<template>
  <div class="container">
    <PcHeader></PcHeader>
    <img
      v-if="bannerImgList && bannerImgList.indexImg"
      class="banner-bg"
      :src="returnImg(bannerImgList.indexImg)"
      :alt="bannerImgList.indexTitle"
    >
    <div class="banner-title" v-if="bannerImgList">
      <h3>{{bannerImgList.indexName}}</h3>
      <p>{{bannerImgList.indexContent}}</p>
    </div>

    <div class="customerCase">
      <ul class="select-me-box">
        <!-- <div class="search-box">
          <div>
            <el-input v-model="type"></el-input>
          </div>
          <div class="operatiion">
            <el-button type="primary" size="small" @click="search">查询</el-button>
          </div>
        </div> -->
        <li class="select-me-item" v-for="(item,index) in customerCase" :key="index">
          <img :src="returnImg(item.indexImg)" :alt="item.indexTitle">
          <div class="img-box">
            <img :src="returnImg(item.indexTitle)" :alt="item.indexTitle">
            <p>{{item.indexContent}}</p>
          </div>
        </li>
      </ul>
      <el-pagination
        background
        layout="prev, pager, next,total,sizes"
        :page-sizes="[20,50, 100]"
        :page-size="pageConfig.pageSize"
        :total="pageConfig.total"
        @size-change="hanldleSizeChange"
        @current-change="handleCurrentChange"
        popper-class="admin-popper"
      />
    </div>

    <backTop/>
    <PcFooter></PcFooter>
  </div>
</template>
<script>
import PcHeader from "@/components/PcHeader/index.vue";
import PcFooter from "@/components/PcFooter/index.vue";
import backTop from "@/components/BackTop/index.vue";
import { getSolutionCustomer,getSolutionBanner } from "@/api/PC-Home";
export default {
  components: { PcHeader, PcFooter, backTop },
  metaInfo: {
    title: "领雁智远-智能时代的推动者",
    meta: [
      {
        name: "keywords",
        content: "智远"
      },
      {
        name: "description",
        content: "智远"
      }
    ]
  },
  computed: {},
  data() {
    return {
      selectChangeIndex: 0,
      timer: null,
      certificationList: null,
      activeImg: "",
      bannerImgList: [],
      tabList: [],
      activeIndex: 0,
      aboutUs: null,
      enterpriseCulture: null,
      actionId: "",
      productOverview: [],
      nineAdvantages: [],
      schemeValue: [],
      riskControl: [],
      coreAdvantage: [],
      empowerYou: [],
      customerCase: [],
      activeImgIndex: 0,
      type: "",
      pageConfig: {
        total: 100,
        pageSize: 20,
        pageNum: 1
      }
    };
  },
  mounted() {
    if (this.$route.query.id) {
      this.getSolutionCustomer(this.$route.query.id);
    }
    this.getSolutionBanner()
  },
  methods: {
    returnImg(url) {
      if(url){
        return process.env.VUE_APP_URL + "/" + url;
      } 
    },
    handleChangeImg(item) {
      this.activeImg = item.indexImg;
    },
    rest() {
      this.type = "";
      this.getSolutionCustomer(this.$route.query.id);
    },
    search() {
      this.getSolutionCustomer(this.$route.query.id);
    },
    getSolutionCustomer(val) {
      let param = {
        parentId: val + "005",
        current: this.pageConfig.pageNum,
        size: this.pageConfig.pageSize,
        indexContent: this.type
      };
      getSolutionCustomer(param).then(res => {
        this.customerCase = res.data.records;
        this.pageConfig.total = res.data.total;
      });
    },
    getSolutionBanner() {
      this.imageBannerFileList = []
      let param = {
        id: "201001202001005"
      };
      getSolutionBanner(param).then(res => {
        this.bannerImgList = res.data
      });
    },
  }
};
</script>
<style scoped lang="scss">
.banner-bg {
  width: 100%;
  height: 4.8rem;
}
.banner-title {
  position: absolute;
  top: 2.194rem;
  left: 1.828rem;
  width: 6.65rem;
  text-align: left;
  h3 {
    font-size: 0.32rem;
    color: #ffffff;
    letter-spacing: 0;
    margin-bottom: 0.365rem;
  }
  p {
    font-size: 0.228rem;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 0.457rem;
  }
}
.customerCase {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  .select-me-box {
    width: 13.714rem;
    height: auto;
    margin-top: 0.274rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    .search-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      border: 0;
      padding: 0;
      margin-bottom: 0.228rem;
      .operatiion{
        margin-left: 0.17rem;
      }
    }
    .select-me-item {
      width: 100%;
      height: 3.74rem;
      background: #ffffff;
      box-shadow: 0 8px 0.32rem 0 rgba(0, 17, 67, 0.1);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 0.182rem 0.365rem;
      box-sizing: border-box;
      margin-bottom: 0.17rem;
      &:hover {
        box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
        // border: 1px solid #1790ff;
        box-sizing: border-box;
        background: rgba(247, 250, 255, 1);
      }
      img {
        width: 2.742rem;
        height: 3.017rem;
        margin-right: 0.64rem;
      }
      .img-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1;
        height: 100%;
        img {
          width: 1.828rem;
          height: 0.457rem;
          margin-top: 0.228rem;
        }
        p {
          font-size: 0.16rem;
          color: #323233;
          letter-spacing: 0;
          text-align: justify;
          line-height: 0.32rem;
          margin-top: 0.274rem;
        }
      }
    }
  }
}
.title {
  width: 13.714rem;
  font-size: 0.457rem;
  color: #323233;
  letter-spacing: 0;
  text-align: center;
  margin-top: 1.097rem;
  position: relative;
}
.details {
  font-size: 0.16rem;
  color: #1790ff;
  letter-spacing: 0;
  line-height: 0.365rem;
}
.showMore {
  font-size: 0.182rem;
  color: #909399;
  letter-spacing: 0;
  line-height: 0.20rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  .el-icon {
    margin-left: 8px;
  }
}
::v-deep .el-pagination {
  width: 13.714rem;
  margin: 0.228rem auto;
}
@media only screen and (max-device-width: 768px) {
  .banner-bg {
    height: auto;
    top: 10.457rem;
  }
  .banner-title {
    width: 92%;
    top: 2.228rem;
    left: 0.228rem;
    padding: 0 0.228rem;
    box-sizing: border-box;
    h3 {
      font-size: 0.342rem;
      margin-bottom: 0.17rem;
    }
  }
  .customerCase {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.17rem;
    box-sizing: border-box;
    .select-me-box {
      width: 100%;
      height: auto;
      margin-top: 0.64rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      position: relative;
      .left {
        width: 0.457rem;
        height: 0.457rem;
        text-align: center;
        position: absolute;
        top: 0.342rem;
        right: 1.028rem;
        border: 1px solid #efefef;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .right {
        width: 0.457rem;
        height: 0.457rem;
        text-align: center;
        position: absolute;
        top: 0.342rem;
        right: 0.342rem;
        border: 1px solid #efefef;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      .select-me-item {
        width: 100%;
        height: 100%;
        background: #ffffff;
        box-shadow: 0 8px 0.32rem 0 rgba(0, 17, 67, 0.1);
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.182rem;
        box-sizing: border-box;
        &:hover {
          box-shadow: 0 0 10px rgba(0, 17, 67, 0.3);
          // border: 1px solid #1790ff;
          box-sizing: border-box;
        }
        img {
          width: 100%;
          height: auto;
          margin-right: 0;
        }
        .img-box {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          flex: 1;
          height: 100%;
          img {
            width: 1.828rem;
            height: 0.457rem;
            margin-top: 0.228rem;
          }
          p {
            font-size: 0.16rem;
            color: #323233;
            letter-spacing: 0;
            text-align: justify;
            line-height: 0.32rem;
            margin-top: 0.274rem;
          }
        }
      }
    }
  }
  .title {
    width: 100%;
    font-size: 0.457rem;
  }
  ::v-deep .el-pagination {
    width: 100%;
    margin: 0.228rem auto;
    padding: 0 0.228rem;
    box-sizing: border-box;
  }
}
</style>